<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DBC编辑器 - CAN数据库编辑工具</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <div class="app-container">
        <header class="header">
            <div class="header-content">
                <h1><i class="fas fa-database"></i> DBC编辑器</h1>
                <div class="file-operations">
                    <input type="file" id="dbcFile" accept=".dbc" style="display: none;">
                    <button onclick="document.getElementById('dbcFile').click()" class="btn btn-primary">
                        <i class="fas fa-upload"></i> 打开DBC
                    </button>
                    <button onclick="downloadDBC()" class="btn btn-secondary">
                        <i class="fas fa-download"></i> 下载DBC
                    </button>
                    <button onclick="toggleFullscreen()" class="btn btn-secondary">
                        <i class="fas fa-expand"></i> 全屏
                    </button>
                </div>
            </div>
        </header>

        <main class="main-content">
            <!-- CAN消息区域 -->
            <section class="section">
                <div class="section-header">
                    <h2><i class="fas fa-envelope"></i> CAN消息</h2>
                    <div class="section-controls">
                        <button onclick="addCanMessage()" class="btn btn-success btn-sm">
                            <i class="fas fa-plus"></i> 添加
                        </button>
                        <button onclick="removeCanMessage()" class="btn btn-danger btn-sm">
                            <i class="fas fa-minus"></i> 删除
                        </button>
                    </div>
                </div>
                <div class="table-container">
                    <table id="canMessagesTable" class="data-table">
                        <thead>
                            <tr>
                                <th>选择</th>
                                <th>名称</th>
                                <th>CAN ID (HEX)</th>
                                <th>CAN ID (DEC)</th>
                                <th>类型</th>
                                <th>DLC</th>
                                <th>注释</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 动态生成的内容 -->
                        </tbody>
                    </table>
                </div>
            </section>

            <!-- CAN信号区域 -->
            <section class="section">
                <div class="section-header">
                    <h2><i class="fas fa-signal"></i> CAN信号 (<span id="signalCount">0</span>)</h2>
                    <div class="section-controls">
                        <button onclick="addCanSignal()" class="btn btn-success btn-sm">
                            <i class="fas fa-plus"></i> 添加
                        </button>
                        <button onclick="removeCanSignal()" class="btn btn-danger btn-sm">
                            <i class="fas fa-minus"></i> 删除
                        </button>
                    </div>
                </div>
                <div class="table-container">
                    <table id="canSignalsTable" class="data-table">
                        <thead>
                            <tr>
                                <th>选择</th>
                                <th>名称</th>
                                <th>类型</th>
                                <th>字节序</th>
                                <th>模式</th>
                                <th>起始位</th>
                                <th>长度</th>
                                <th>因子</th>
                                <th>偏移</th>
                                <th>最小值</th>
                                <th>最大值</th>
                                <th>单位</th>
                                <th>注释</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 动态生成的内容 -->
                        </tbody>
                    </table>
                </div>
            </section>

            <!-- 信号预览区域 -->
            <section class="section">
                <div class="section-header">
                    <h2><i class="fas fa-eye"></i> CAN信号预览</h2>
                </div>
                <div class="signal-preview">
                    <div class="preview-section">
                        <h3>字节编号</h3>
                        <div class="byte-layout">
                            <div class="bit-header">
                                <span>编辑器位索引</span>
                                <div class="bit-indices">
                                    <span>7</span><span>6</span><span>5</span><span>4</span>
                                    <span>3</span><span>2</span><span>1</span><span>0</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="preview-section">
                        <h3>CAN帧数据</h3>
                        <div class="frame-data" id="frameData">
                            <!-- 动态生成字节数据 -->
                        </div>
                    </div>

                    <div class="preview-section">
                        <h3>信号掩码</h3>
                        <div class="signal-mask" id="signalMask">
                            <!-- 动态生成信号掩码 -->
                        </div>
                    </div>

                    <div class="preview-section">
                        <h3>数据计算</h3>
                        <div class="calculation-area">
                            <div class="calc-input">
                                <label>数据 = 0x</label>
                                <input type="text" id="hexData" placeholder="输入十六进制数据" oninput="calculatePhysicalValue()">
                                <span> = <span id="decData">0</span></span>
                            </div>
                            <div class="calc-result">
                                <label>物理值 = </label>
                                <span id="rawValue">0</span> * <span id="factor">1</span> + <span id="offset">0</span> = <span id="physicalValue">0</span>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- DBC预览区域 -->
            <section class="section">
                <div class="section-header">
                    <h2><i class="fas fa-code"></i> DBC预览 (<span id="dbcLineCount">0</span>)</h2>
                    <button onclick="toggleDbcPreview()" class="btn btn-secondary btn-sm">
                        <i class="fas fa-eye"></i> 显示/隐藏
                    </button>
                </div>
                <div class="dbc-preview" id="dbcPreview">
                    <pre id="dbcContent"></pre>
                </div>
            </section>
        </main>
    </div>

    <script src="script.js"></script>
</body>
</html> 